<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/plan'}">入库申请审核</el-breadcrumb-item>
    <el-breadcrumb-item>补货申请审核</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/shop'}">采购申请审核</el-breadcrumb-item>
  </el-breadcrumb>
<el-card >

<el-row :gutter="20">
    <el-col :span="5"><el-input placeholder="请输入号码查询" v-model="queryinfo.search"  clearable @clear="getUserList">
      <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input></el-col>
<template>
<el-select v-model="usertext1"  clearable placeholder="审核人" style="width: 120px; margin-right: 6px;">
  <el-option
    v-for="item in listtest"
    :key="item.id"
    :label="item.auditor"
    :value="item.auditor">
  </el-option>
</el-select>
</template>

<template>
<el-select v-model="usertext3"  clearable placeholder="申请人" style="width: 120px;  margin-right: 6px;">
  <el-option
    v-for="item in listtest"
    :key="item.id"
    :label="item.applyname"
    :value="item.applyname">
  </el-option>
</el-select>
</template>
<template>
<el-select v-model="state1"  clearable placeholder="申请状态" style="width: 120px;  margin-right: 6px;">
  <el-option
    v-for="item in options"
    :key="item.value1"
    :label="item.label1"
    :value="item.label1">
  </el-option>
</el-select>
</template>
<template>
<el-select v-model="state2"  clearable placeholder="审核状态" style="width: 120px;  margin-right: 6px;">
  <el-option
    v-for="item in options2"
    :key="item.value2"
    :label="item.label2"
    :value="item.label2">
  </el-option>
</el-select>
</template>

</el-row>
<div class="block" style="margin-top: 10px;">
  <el-date-picker
    v-model="data1"
    type="daterange"
    range-separator="至"
    start-placeholder="申请开始日期"
    end-placeholder="申请结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-date-picker
    v-model="data2"
    type="daterange"
    range-separator="至"
    start-placeholder="审核开始日期"
    end-placeholder="审核结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>

</div>
<template>
    <el-table
    :data="currentPageData"
      border
      stripe

      >

        <el-table-column
         prop="id"
label="编号"
width="80%"
align="center"
          >
        </el-table-column>
      <el-table-column
        prop="contractid"
        label="单据号"
        width="120%"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="120%"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="applyname"
        label="申请人"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="applydata"
        label="申请日期"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="applystate"
        label="申请状态"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="auditor"
        label="审核人"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
        prop="auditordata"
        label="审核日期"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
      prop="auditorstate"
        label="审核状态"
        width="120%"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="130%"
        align="center">
        <template v-slot="">

            <el-tooltip  effect="dark" content="详细" placement="top">
                <el-button type="primary" icon="el-icon-info" size="12px" circle @click="detail"></el-button>
    </el-tooltip>

        </template>
      </el-table-column>
    </el-table>
  </template>
  <div class="block">

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[1, 2, 3, 5,8,10]"
      :page-size="queryinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;">
    </el-pagination>

  </div>
</el-card>
<el-dialog
title="审核补货申请"
:visible.sync="putusers"
width="33%"
>
<span class="opinion">
  <el-form :inline="true" >
<el-form-item >
  <el-input placeholder="审批意见" class="opininp"></el-input>
</el-form-item>
  </el-form>
  <el-row class="opinbtu">
    <el-divider class="underline"><i class="el-icon-s-check"></i></el-divider>
<el-button type="success" round>审批通过</el-button>

<el-button type="danger" round >审批驳回</el-button>
</el-row>
</span>

</el-dialog>
<!-- 修改用户 -->
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'PurchaseContract',
  data () {
    return {
      data1: '',
      data2: '',
      data3: '',
      state1: '',
      state2: '',
      usertext1: '',
      usertext2: '',
      usertext3: '',
      listtest: [],
      userinfo: [],
      total: 0,
      addDialogVisible: false,
      queryinfo: {
        search: '',
        pagenum: 1,
        pageSize: 5
      },
      addForm: {
      },
      addFormref: {},
      addrules: {
      },
      putusers: false,
      options: [{
        value1: '选项1',
        label1: '未提交'
      }, {
        value1: '选项2',
        label1: '待审核'
      }, {
        value1: '选项3',
        label1: '已审核'
      }],
      options2: [{
        value2: '选项1',
        label2: '通过'
      }, {
        value2: '选项2',
        label2: '驳回'
      }]

    }
  },
  methods: {
  // 获取列表V
    async getUserList () {
      const res = await axios.get('/cart', {
        params:
        this.queryinfo

      })
      this.listtest = res.data.user
      this.total = res.data.total
    },

    // 获取页码V
    async getPage () {
      const res = await axios.get('/cart')
      this.queryinfo.pagenum = res.data.pagenum
      this.queryinfo.pageSize = res.data.pageSize
      this.getUserList()
    },

    handleSizeChange (newsize) {
      this.queryinfo.pageSize = newsize
    },
    handleCurrentChange (newnum) {
      this.queryinfo.pagenum = newnum
    },
    // 更新用户状态V
    addchear () {
      this.$refs.addFormref.resetFields()
    },

    detail () {
      this.putusers = true
    },
    refresh () {
      this.data1 = ''
      this.data2 = ''
      this.data3 = ''
      this.state1 = ''
      this.state2 = ''
      this.usertext1 = ''
      this.usertext2 = ''
      this.usertext3 = ''
      this.queryinfo.search = ''
    }
  },
  components: {},
  computed: {
    currentPageData () {
      const start = (this.queryinfo.pagenum - 1) * this.queryinfo.pageSize
      const end = start + this.queryinfo.pageSize
      return this.listtest.slice(start, end)
    }
  },
  mounted () {
    this.getUserList()
  }
}
</script>
<style lang="less" scoped>
.underline{
  position: relative;
  right: 142px;
}
.data{
margin-top: 12px;
}
.opinion{
position: relative;
left: 100px;
width: 200px;
height: 200px;
}
.opininp{
box-sizing: border-box;
position: relative;
right: 90px;
width: 500px;
}
.opinbtu{
position: relative;
left: 50px;
padding-right: 20px;
top: 20px;
}
.classify{
position: relative;
right: 10px;
width: 93px;
}
</style>
